<!-- 考勤-考勤管理-考勤组管理 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <a-tabs v-model="type" default-active-key="1">
      <a-tab-pane key="1" title="考勤组列表">
        <ConditionBox :margin-bottom="20">
          <template #left>
            <a-input-search
              :style="{ width: '220px' }"
              placeholder="请输入关键字"
              search-button
              @search="onSearch"
              @press-enter="onSearch"
              v-model="nameSearchClass"
            />
          </template>
          <template #right>
            <a-button type="primary" @click="add(1)" style="margin-right: 10px"
              >新增考勤组</a-button
            >
            <a-button type="primary" @click="dels" style="margin-right: 10px"
              >批量删除</a-button
            >
          </template>
        </ConditionBox>
        <table-turn
          :args="{
            rowSelection: {
              type: 'checkbox',
              showCheckedAll: true,
              onlyCurrent: false
            }
          }"
          :table-data="getTableDataClass"
          ref="tableRefClass"
        >
          <a-table-column :width="80">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column :width="200" data-index="name" title="考勤组名称">
            <template #cell="{ record }">
              {{ record.name }}
              <a-tag
                v-if="record.isDefault === 1"
                checkable
                color="arcoblue"
                :default-checked="true"
                >默认</a-tag
              >
            </template>
          </a-table-column>
          <a-table-column
            :width="200"
            data-index="attendanceWorkCalendar.name"
            title="工作日历"
          >
            <!-- <template #cell="{ record }">
              {{ record.attendanceWorkCalendarId }}
            </template> -->
          </a-table-column>
          <a-table-column
            :width="200"
            data-index="attendanceCycle.name"
            title="考核周期"
          >
            <template #cell="{ record }">
              <div v-if="record.attendanceCycle.type === 1">自然月</div>
              <div v-else>
                {{
                  `${mouth[record.attendanceCycle.startMouth]}${
                    record.attendanceCycle.startDay
                  }日至${mouth[record.attendanceCycle.endMouth]}${
                    record.attendanceCycle.endDay
                  }日`
                }}
              </div>
            </template>
          </a-table-column>
          <a-table-column :width="200" data-index="definition" title="选用班次">
            <template #cell="{ record }">
              <div
                v-for="item in record.attendanceClassesSetting"
                :key="item.id"
              >
                {{
                  `${item.name || '暂无'}:${item.commutingTime
                    .map((ele: any) => attendanceTime(ele))
                    .join(';')}`
                }}
              </div>
            </template>
          </a-table-column>
          <a-table-column
            :width="200"
            data-index="schedulingOfficer"
            title="排班专员"
          >
            <template #cell="{ record }">
              {{
                record.schedulingOfficer.map(({ name }: any) => name).join('、')
              }}
            </template>
          </a-table-column>
          <a-table-column :width="200" data-index="department" title="适用部门">
            <template #cell="{ record }">
              {{ record.department.map(({ name }: any) => name).join('、') }}
            </template>
          </a-table-column>
          <a-table-column :width="200" data-index="employee" title="适用人员">
            <template #cell="{ record }">
              {{
                record.employee
                  .map(({ userInfo }: any) => userInfo.name)
                  .join('、')
              }}
            </template>
          </a-table-column>
          <!-- <a-table-column :width="200" data-index="definition" title="适用职位">
          </a-table-column>
          <a-table-column :width="200" data-index="definition" title="是否生效">
          </a-table-column> -->
          <a-table-column :width="200" data-index="" title="操作" fixed="right">
            <template #cell="{ record }">
              <a-tooltip content="排班">
                <icon-settings
                  :size="20"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer',
                    color: '#4e81f5'
                  }"
                />
              </a-tooltip>
              <a-tooltip content="编辑">
                <icon-edit
                  @click="goEdit(record)"
                  :size="20"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer',
                    color: '#4e81f5'
                  }"
                />
                <!-- <IconFont
                  type="icon-edit"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer'
                  }"
                  @click="goEdit(record)"
                /> -->
              </a-tooltip>
              <a-tooltip v-if="record.isDefault !== 1" content="设为默认">
                <a-popconfirm
                  content="是否设为默认?"
                  @ok="changeDefault(record)"
                >
                  <icon-save
                    :size="20"
                    :style="{
                      marginRight: '10px',
                      cursor: 'pointer',
                      color: '#4e81f5'
                    }"
                  />
                </a-popconfirm>

                <!-- <IconFont
                  type="icon-edit"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer'
                  }"
                  @click="goEdit(record)"
                /> -->
              </a-tooltip>
              <a-tooltip content="删除" position="left">
                <a-popconfirm
                  content="是否确认删除该条数据?"
                  @ok="del(record.id)"
                >
                  <icon-delete
                    :size="20"
                    :style="{
                      marginRight: '10px',
                      cursor: 'pointer',
                      color: 'red'
                    }"
                  />
                  <!-- <icon-font type="icon-delete" /> -->
                </a-popconfirm>
              </a-tooltip>
            </template>
          </a-table-column>
        </table-turn>
      </a-tab-pane>
      <a-tab-pane key="2" title="考勤豁免">
        <ConditionBox :margin-bottom="20">
          <template #left>
            <a-input-search
              :style="{ width: '220px' }"
              placeholder="请输入"
              search-button
              @search="onSearch"
              @press-enter="onSearch"
              v-model="nameSearch"
            />
          </template>
          <template #right>
            <a-button type="primary" @click="add(2)" style="margin-right: 10px">
              新增豁免人员
            </a-button>
            <a-button
              type="primary"
              @click="add(null)"
              style="margin-right: 10px"
            >
              批量删除
            </a-button>
          </template>
        </ConditionBox>
        <table-turn
          :args="{
            rowSelection: {
              type: 'checkbox',
              showCheckedAll: true,
              onlyCurrent: false
            }
          }"
          :table-data="getTableData"
          ref="tableRef"
        >
          <a-table-column :width="80">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column :width="200" data-index="name" title="姓名">
          </a-table-column>
          <a-table-column :width="200" data-index="jobNum" title="工号">
            <template #cell="{ record }">
              {{ record.jobNum || '----' }}
            </template>
          </a-table-column>
          <a-table-column :width="200" data-index="departmentName" title="部门">
            <template #cell="{ record }">
              {{ record.departmentName || '----' }}
            </template>
          </a-table-column>
          <a-table-column :width="200" data-index="positionName" title="职位">
            <template #cell="{ record }">
              {{ record.positionName || '----' }}
            </template>
          </a-table-column>
          <a-table-column :width="200" data-index="positionLevel" title="职级">
            <template #cell="{ record }">
              {{ record.positionLevel || '----' }}
            </template>
          </a-table-column>
          <!-- <a-table-column
            :width="200"
            data-index="AuditStatus"
            title="是否生效"
          >
          </a-table-column> -->
          <a-table-column :width="200" data-index="" title="操作" fixed="right">
            <template #cell="{ record }">
              <a-tooltip content="删除" position="left">
                <a-popconfirm
                  content="是否确认删除该条数据?"
                  @ok="del(record.id)"
                >
                  <icon-font
                    type="icon-delete"
                    :size="26"
                    :style="{
                      cursor: 'pointer',
                      marginRight: '10px'
                    }"
                  />
                </a-popconfirm>
              </a-tooltip>
            </template>
          </a-table-column>
        </table-turn>
      </a-tab-pane>
    </a-tabs>
  </ContentCard>
</template>

<script lang="ts" setup>
import {
  GetClassesList,
  DelClasses,
  GetRemitList,
  DelRemit,
  PutClasses
} from '@/apis/attendance/base-setting/index';
import { Message, Modal } from '@arco-design/web-vue';
import { cloneDeep } from 'lodash';

const router = useRouter();
const title = '考勤组管理';
const type = ref('1');
const mouth = ['上月', '本月', '次月'];

const breadCrumb: string[] = ['考勤', '考勤管理', '考勤组管理'];

let currData = ref(); // 储存当前选中数据
let tableRef = ref();
const tableRefClass = ref();
let nameSearch = ref(''); // 搜索框值
let nameSearchClass = ref(''); // 搜索框值

// 新增
const add = (record: any) => {
  router.push({
    name: 'AttendanceManagementGroupAdd',
    query: { type: record }
  });
};

// 获取表格数据
const getTableDataClass = async (data: {
  pageNumber: number;
  pageSize: number;
}) => {
  try {
    const res = await GetClassesList({ ...data, name: nameSearchClass.value });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};
// 获取表格数据
const getTableData = async (data: { pageNumber: number; pageSize: number }) => {
  try {
    const res = await GetRemitList({ ...data, name: nameSearch.value });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 搜索框搜索事件
const onSearch = () => {
  refresh();
};

// 编辑
const goEdit = (record: any) => {
  router.push({
    name: 'AttendanceManagementGroupAdd',
    query: { type: type.value }
  });
  if (type.value === '1') {
    localStorage.setItem('classesData', JSON.stringify(record));
  } else {
    // await DelRemit({ ids: [id] });
  }
};

// 删除某一行
const del = async (id: number) => {
  try {
    if (type.value === '1') {
      await DelClasses({ ids: [id] });
    } else {
      await DelRemit({ ids: [id] });
    }

    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

const dels = () => {
  if (type.value === '1') {
    if (tableRefClass.value.selectedList.length === 0) {
      Message.error('请至少选择一项！');
    } else {
      Modal.confirm({
        title: '提示',
        content: '确定要删除选中的数据吗？',
        onOk: async () => {
          try {
            await DelClasses({
              ids: tableRefClass.value.selectedList
            });
            tableRefClass.value.selectedList = [];
            tableRef.value.loadData();
          } catch (error: unknown) {
            console.log(error);
          }
        }
      });
    }
  } else {
    if (tableRef.value.selectedList.length === 0) {
      Message.error('请至少选择一项！');
    } else {
      Modal.confirm({
        title: '提示',
        content: '确定要删除选中的数据吗？',
        onOk: async () => {
          try {
            await DelRemit({
              ids: tableRef.value.selectedList
            });
            tableRef.value.selectedList = [];
            tableRef.value.loadData();
          } catch (error: unknown) {
            console.log(error);
          }
        }
      });
    }
  }
  refresh();
};

// 弹窗自定义事件
const indexEmit = async (record: any) => {
  //
};

// 刷新表格数据
const refresh = () => {
  if (type.value === '1') {
    tableRefClass.value.loadData();
  } else {
    tableRef.value.loadData();
  }
};
const attendanceTime = (data: any) => {
  return (
    '上下班：' +
    data.workingTime +
    '-' +
    data.afterWorkTime +
    ',' +
    '休息：' +
    data.restTimeStart +
    '-' +
    data.restTimeEnd
  );
};
const changeDefault = async (data: any) => {
  const newData = cloneDeep(data);
  newData.isDefault = 1;
  if (type.value === '1') {
    await PutClasses(newData);
  } else {
    // await PutRemit(newData);
  }

  refresh();
};
</script>

<style lang="less" scoped>
.tag {
  height: 48px;
  color: #000;
  background-color: rgba(61, 126, 255, 1);
  width: 100%;
  font-size: 15px;
}
:deep(.arco-collapse-item-content) {
  background-color: #fff;
}
</style>
